<template>
  <view class="container">
    <view class="list-box">
    	<view class="item" v-for="(item, index) in list" :key="index">
    	  <view class="left">
    	    <radio-group v-model="item.checked">
    	      <radio :value="true"></radio>
    	    </radio-group>
    	    <view class="icon" :style="{ backgroundColor: item.color }"></view>
    	    <text>{{ item.name }} ({{ item.count }})</text>
    	  </view>
    	  <view class="right">
    	    <view v-if="item.locked" class="lock-icon"></view>
    	    <view class="delete-icon" @click="deleteItem(index)"></view>
    	  </view>
    	</view>
    </view>
    <view class="bottom">
      <radio-group v-model="isAllChecked">
        <radio :value="true">全选</radio>
      </radio-group>
      <view @click="addTag" class="add-btn">添加标签</view>
      <view class="save-btn" @click="saveTags">保存标签</view>
    </view>
	<view class="bottom-btm">
		
	</view>
  </view>
</template>
<script>
	export default {
	  data() {
	    return {
	      list: [
	        { name: '双星尺蛾', color:'red', count: 1, checked: false, locked: true },
	        { name: '黑尺蛾', color: 'orange', count: 2, checked: true, locked: true },
	        { name: '羊目蛾', color: 'gold', count: 1, checked: true, locked: true },
	        { name: '横线连翅野螟', color: 'green', count: 0, checked: false, locked: true }
	      ],
	      isAllChecked: false
	    };
	  },
	  methods: {
	    deleteItem(index) {
	      this.list.splice(index, 1);
	    },
	    addTag() {
	      // 这里实现添加标签逻辑，例如弹出输入框等
	      console.log('添加标签逻辑');
	    },
	    saveTags() {
	      const selectedItems = this.list.filter(item => item.checked);
	      console.log('保存选中的标签:', selectedItems);
	      // 这里可以添加实际保存到后端等逻辑
	    }
	  }
	};
</script>
<style lang="scss" scoped>
	.container {
	  height: 100vh;
	  overflow: hidden;
	  background-color: #f4f5f5;
	  .list-box {
		  margin-top: 24rpx;
		  box-sizing: border-box;
		  padding: 0 20rpx;
	  }
	}
	.item {
		margin-bottom: 18rpx;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(0,0,0,0.02);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0 10rpx;
	}
	.left {
	  display: flex;
	  align-items: center;
	}
	.icon {
	  width: 20px;
	  height: 20px;
	  margin-right: 10px;
	}
	.right {
	  display: flex;
	  align-items: center;
	}
	.lock-icon {
	  width: 20px;
	  height: 20px;
	  background-image: url('../../static/image/lock.png'); /* 替换为实际锁图标路径 */
	  margin-right: 10px;
	}
	.delete-icon {
	  width: 20px;
	  height: 20px;
	  background-image: url('../../static/image/lock.png'); /* 替换为实际删除图标路径 */
	}
	.bottom {
		width: 100%;
		position: fixed;
		bottom: 68rpx;
		height: 130rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(0,0,0,0.02);
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	}
	.bottom-btm {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;
		height: 68rpx;
	}
	.add-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 210rpx;
		height: 90rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(244,49,34,0.02);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 1rpx solid #CACCCE;
	}
	.save-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 210rpx;
		height: 90rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	  background-color: #07c160;
	  color: white;
	}
</style>